<template>
    <div class="banxin bigbox">
        <h2> {{titlename}} <i @click="MoreImg(titlename)">更多&gt;&gt;</i></h2>
        <div v-for="(item,index) in imgData" :key="item.id" class="box"  @click="smallBoxClick(item.imgurl,index)">
            <div class="imgbg">
                <h3>{{item.title}}</h3>
                <p>{{item.text}}</p>
            </div>
            <img :src="item.imgurl" :alt="item.alt">
        </div>
        <ShowImg :IsShow="imgShowOR" :imgurl="imgpath" @changeShow="changeImgShowOR" @nextClickFn="nextClickFn"> </ShowImg>
    </div>
</template>

<script>
import ShowImg from './ShowImg.vue'
export default {
    data () {
        return {
            imgpath : '',
            imgShowOR : false,
            nowShowImgIndex : 0
        }
    },
    props:['titlename','imgData'],
    methods:{
        // 小图片的点击事件
        smallBoxClick(e,i){
            this.nowShowImgIndex = i
            this.imgpath = e
            this.imgShowOR = true
        },
        changeImgShowOR(){
            this.imgShowOR = false
        },
        // 上一张,下一张图片的效果
        nextClickFn(e){
            // 这里是切换当前显示当中的图片  但是有些问题 在第一张和最后一张的时候显示提示
            if((this.nowShowImgIndex + e) < 0){
                this.nowShowImgIndex = 0
                alert("当前是第一张图片")
                return
            }
            if((this.nowShowImgIndex + e) > this.imgData.length-1){
                this.nowShowImgIndex = this.imgData.length-1
                alert("当前是最后一张图片")
                return
            }
            this.nowShowImgIndex += e
            this.imgpath = this.imgData[this.nowShowImgIndex].imgurl
        },
        // 点击跳转到更多
        MoreImg(e){
            // e是携带的参数 , 根据不同的需求跳转不同的页面
            this.$router.push(`/moreimg?name=${e}`)
        }
    },
    components:{
        ShowImg
    }
}
</script>
 
<style lang = "less" scoped>
    .bigbox {
        font-family: "myFont";
        h2 {
            cursor: default;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            i {
                cursor: pointer;
                font-size: 14px;
                font-weight: normal;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .box {
            width: 33.333%;
            height: 280px;
            background-color: pink;
            float: left;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                filter: blur(2px);
                transition: all 0.5s;
            }
            .imgbg {
                transition: all 0.5s;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0,0.5);
                z-index: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: rgb(222, 222, 222);
                h3 {
                    font-size: 30px;
                }
                p {
                    max-width: 220px;
                    word-wrap: break-word;
                }
            }
            &:hover .imgbg{
                top: -100%;
            }
            &:hover {
                img {
                    filter: blur(0);
                }
            }
        }
        &::after{
            content: "";
            display: block;
            width: 100%;
            height: 0px;
            visibility: hidden;
            clear: both;
        }
    }

</style>